<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/user_vip_record"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        permission="ADMIN"
        @reloadOptions="handleGetOptions"
      >
        <template slot="header_actions" slot-scope="scope">
          <el-button v-waves type="success" class="filter-button" icon="el-icon-sell" @click="payXml()">支付XML</el-button>
          <el-button v-waves type="danger" class="filter-button" icon="el-icon-sold-out" @click="refundXml()">退款XML</el-button>
        </template>
        <template slot="raw_actions" slot-scope="scope">
          <el-popconfirm
            title="是否删除这条数据？"
            icon="el-icon-info"
            icon-color="red"
            confirm-button-type="danger"
            @confirm="refund(scope.$index, scope.row)">
            <el-button slot="reference" v-waves type="danger" style="margin-left: 10px">退款</el-button>
          </el-popconfirm>
        </template>
      </base-list>
      <el-drawer
        :visible.sync="drawerKimiVisible"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        :wrapper-closable="false"
        direction="rtl"
        :modal="false"
        :size="$store.state.app.device !== 'mobile' ? '60%' : '100%'"
      >
        <el-form ref="kimiTempDataForm" label-width="auto" label-suffix=": " :model="kimiTemp" :rules="kimiExpandRules"
                 style="margin: 15px;">
          <el-form-item label="XML" prop="xml">
            <el-input v-model="kimiTemp.xml" type="textarea" :rows="30" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button
              v-waves
              type="primary"
              :loading="addOrEditLoading"
              @click="handleSaveKimiExpand()"
            >提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {getBaseList, getBaseOptions, requestBase} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'

export default {
  name: 'UserVipRecord',
  components: {BaseList},
  data() {
    return {
      addOrEditLoading: false,
      drawerKimiVisible: false,
      kimiType: undefined,
      kimiTemp: {
        xml: undefined
      },
      columns: [
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'user', label: '用户', tooltip: '用户', type: 'REMOTE_SELECT', remote: {url: '/user_info', label: 'nickName',multiple: false}, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'role', label: '权益', tooltip: '权益', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'description', label: '消费描述', tooltip: '消费描述', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'price', label: '价格', tooltip: '价格', type: 'NUMBER', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'discount', label: '折扣', tooltip: '折扣', type: 'NUMBER', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'discountedPrice', label: '折扣价格', tooltip: '折扣价格', type: 'NUMBER', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'orderStatus', label: '支付状态', tooltip: '支付状态', type: 'DICTIONARY', optionKey: 'orderStatusOptions', sortable: true, queryable: true},
        // {show: true, edit: true, width: 'auto',minWidth: '50', key: 'activeAtOnce', label: '立刻激活', tooltip: '立刻激活', type: 'BOOLEAN', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'status', label: '状态', tooltip: '状态', type: 'DICTIONARY', optionKey: 'statusOptions', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'appName', label: '来源APP', tooltip: '来源APP', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'resource', label: '方式', tooltip: '方式', type: 'DICTIONARY', optionKey: 'sourceOptions', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'durationDay', label: '权益天数', tooltip: '权益天数', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'giftDay', label: '赠送天数', tooltip: '赠送权益天数', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '50', key: 'initGift', label: '初始赠送', tooltip: '初始赠送', type: 'BOOLEAN', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'orderNo', label: '订单号', tooltip: '订单号', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'refundNo', label: '退款订单号', tooltip: '退款订单号', type: 'WORD', sortable: true, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'wechatTrade', label: '交易信息', tooltip: '交易信息', type: 'OBJECT', sortable: false, queryable: false},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'wechatRefund', label: '退款信息', tooltip: '退款信息', type: 'OBJECT', sortable: false, queryable: false},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'wechatOpenid', label: 'openid', tooltip: 'openid', type: 'WORD', sortable: true, queryable: true},

        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createTime', label: '创建时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: false, width: 'auto',minWidth: '200', key: 'updateTime', label: '更新时间', tooltip: '更新时间', type: 'DATE_TIME', queryable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createUser', label: '创建人', tooltip: '创建人', type: 'WORD'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'updateUser', label: '修改人', tooltip: '修改人', type: 'WORD'},
      ],
      format: {
        user: (data, index) => {
          return data.user ? data.user.nickName + '(' + data.user.id + ')' : ''
        },
        createUser: (data, index) => {
          return data.createUser ? data.createUser.nickName + '(' + data.createUser.id + ')' : ''
        },
        updateUser: (data, index) => {
          return data.updateUser ? data.updateUser.nickName + '(' + data.updateUser.id + ')' : ''
        }
      },
      kimiExpandRules: {
        xml: [{required: true, message: '请输入xml!', trigger: 'blur'}],
      },
      rules: {
        add: {
          userId: [{required: true, message: '用户ID必填!', trigger: 'blur'}],
          role: [{required: true, message: '权益必填!', trigger: 'blur'}],
          duration: [{required: true, message: '天数必填!', trigger: 'blur'}],
          activeAtOnce: [{required: true, message: '立刻激活必填!', trigger: 'blur'}],
          resource: [{required: true, message: '来源必填!', trigger: 'blur'}],
          status: [{required: true, message: '状态必填!', trigger: 'blur'}],

        },
        edit: {
          id: [{required: true, message: '请选择数据!', trigger: 'change'}],
          userId: [{required: true, message: '用户ID必填!', trigger: 'blur'}],
          role: [{required: true, message: '权益必填!', trigger: 'blur'}],
          duration: [{required: true, message: '天数必填!', trigger: 'blur'}],
          activeAtOnce: [{required: true, message: '立刻激活必填!', trigger: 'blur'}],
          resource: [{required: true, message: '来源必填!', trigger: 'blur'}],
          status: [{required: true, message: '状态必填!', trigger: 'blur'}],

        }
      },
      options: {
        sourceOptions: [
          {id: 'BUY', name: '购买', type: 'success', effect: 'dark'},
          {id: 'REDEEM_CODE', name: '兑换码', type: 'primary', effect: 'dark'},
          {id: 'INIT_GIFTS', name: '初始赠送', type: 'success', effect: 'plain'},
          {id: 'SYSTEM', name: '系统赠送', type: 'primary', effect: 'plain'},
        ],
        statusOptions: [
          {id: 'NO_USE', name: '未使用', type: 'primary'},
          {id: 'USED', name: '已使用', type: 'success'},
          {id: 'AUDIT', name: '进行中', type: 'warning'},
          {id: 'CANCEL', name: '取消', type: 'info'},
        ],
        orderStatusOptions: [
          {id: 'NO_PAY', name: '无需支付', type: 'info', effect: 'plain'},
          {id: 'UNPAID', name: '待支付', type: 'warning'},
          {id: 'PAID', name: '已支付', type: 'success', effect: 'dark'},
          {id: 'FAIL', name: '支付失败', type: 'danger'},
          {id: 'REFUND', name: '已退款', type: 'danger', effect: 'dark'},
          {id: 'REFUND_APPLY', name: '申请退款', type: 'warning', effect: 'dark'},
          {id: 'CANCEL', name: '已取消', type: 'info'}
        ],
      }
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    },
    refund(index, row) {
      if (row.orderStatus !== 'PAID') {
        this.$notify.error('该订单不支持退款')
        return
      }
      requestBase({url: '/user_vip_record/refund/' + row.id, method: 'POST'}).then(res => {
        this.$notify.success('退款申请发起成功')
      }).catch(() => {
      })
    },
    payXml() {
      this.kimiTemp.xml = undefined
      this.kimiType = 'handle_wechat_pay'
      this.drawerKimiVisible = true
    },
    refundXml() {
      this.kimiTemp.xml = undefined
      this.kimiType = 'handle_wechat_refund'
      this.drawerKimiVisible = true
    },
    handleSaveKimiExpand() {
      this.addOrEditLoading = true
      this.$refs.kimiTempDataForm.validate((valid) => {
        if (valid) {
          requestBase({url: '/user_vip_record/' + this.kimiType, method: 'POST'}).then(res => {
            this.drawerKimiVisible = false
            this.$notify.success('提交成功!')
            this.addOrEditLoading = false
          }).catch(() => {
            this.addOrEditLoading = false
          })
        } else {
          this.addOrEditLoading = false
        }
      })
    }
  }
}
</script>


